<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./assets/global.css" />
    <title>Magic: The Gathering Card</title>
    <script src="./js/util.js"></script>
    <script src="./js/globalData.js"></script>
    <style>
      .box-img {
        width: 140px;
        height: 140px;
        margin: auto;
        cursor: pointer;
        background-position: 100% 100%;
        background-size: cover;
        background-image: url("./assets/images/closeBox.png");
      }
      @keyframes shake {
        0% {
          transform: rotate(0deg);
        }
        25% {
          transform: rotate(-10deg);
        }
        50% {
          transform: rotate(2deg);
        }
        75% {
          transform: rotate(-2deg);
        }
        100% {
          transform: rotate(0deg);
        }
      }
      @keyframes open {
        0%,
        2%,
        4%,
        6%,
        8%,
        10%,
        12%,
        14%,
        16%,
        18%,
        20%,
        22%,
        24%,
        26%,
        28%,
        30%,
        32%,
        34%,
        36%,
        38%,
        40%,
        42%,
        44%,
        46%,
        48%,
        50%,
        52%,
        54%,
        56%,
        58%,
        60%,
        62%,
        64%,
        66%,
        68%,
        70%,
        72%,
        74%,
        76%,
        78%,
        80%,
        82%,
        84%,
        86%,
        88%,
        90%,
        92%,
        94%,
        96%,
        98%,
        100% {
          transform: rotate(10deg);
        }
        1%,
        3%,
        5%,
        7%,
        9%,
        11%,
        13%,
        15%,
        17%,
        19%,
        21%,
        23%,
        25%,
        27%,
        29%,
        31%,
        33%,
        35%,
        37%,
        39%,
        41%,
        43%,
        45%,
        47%,
        49%,
        51%,
        53%,
        55%,
        57%,
        59%,
        61%,
        63%,
        65%,
        67%,
        69%,
        71%,
        73%,
        75%,
        77%,
        79%,
        81%,
        83%,
        85%,
        87%,
        89%,
        91%,
        93%,
        95%,
        97%,
        99% {
          transform: rotate(-10deg);
        }
      }
      @keyframes open_x {
        0%,
        2%,
        4%,
        6%,
        8%,
        10%,
        12%,
        14%,
        16%,
        18%,
        20%,
        22%,
        24%,
        26%,
        28%,
        30%,
        32%,
        34%,
        36%,
        38%,
        40%,
        42%,
        44%,
        46%,
        48%,
        50%,
        52%,
        54%,
        56%,
        58%,
        60%,
        62%,
        64%,
        66%,
        68%,
        70%,
        72%,
        74%,
        76%,
        78%,
        80%,
        82%,
        84%,
        86%,
        88%,
        90%,
        92%,
        94%,
        96%,
        98%,
        100% {
          transform: translateX(5px);
        }
        1%,
        3%,
        5%,
        7%,
        9%,
        11%,
        13%,
        15%,
        17%,
        19%,
        21%,
        23%,
        25%,
        27%,
        29%,
        31%,
        33%,
        35%,
        37%,
        39%,
        41%,
        43%,
        45%,
        47%,
        49%,
        51%,
        53%,
        55%,
        57%,
        59%,
        61%,
        63%,
        65%,
        67%,
        69%,
        71%,
        73%,
        75%,
        77%,
        79%,
        81%,
        83%,
        85%,
        87%,
        89%,
        91%,
        93%,
        95%,
        97%,
        99% {
          transform: translateX(-5px);
        }
      }
      .shake:hover {
        animation: shake 0.5s infinite; /* Adjust duration and timing as needed */
      }
      .opening {
        animation: open 2s normal; /* Adjust duration and timing as needed */
      }
      .opening_x {
        animation: open_x 2s normal; /* Adjust duration and timing as needed */
      }

      body {
      }
      /* 10 60 10 30 */
      #playerOne,
      #playerTwo {
        display: flex;
        width: 300px;
        margin: 0 auto;
        overflow: scroll;
      }
      .card {
        width: 90px;
        height: 120px;
        position: relative;
        border-radius: 4px;
        border: 2px solid #000000;
        margin: 10px;
      }
      .back {
        width: 90px;
        height: 120px;
        border-radius: 4px;
        background-color: #7d5510;
        border: 2px solid #000000;
        background-position: 100% 50%;
        background-size: contain;
        background-repeat: no-repeat;
        background-image: url("./assets/images/white.png");
        margin: 10px;
      }
      .card-name {
        height: 10px;
        text-align: center;
        font-size: 10px;
      }
      .card-cost,
      .card-point {
        height: 20px;
        width: 20px;
        position: absolute;
        border-radius: 20px;
        text-align: center;
        top: -6px;
      }
      .card-cost {
        left: -4px;
        background-color: #242bff;
      }
      .card-point {
        right: -4px;
        background-color: #f88400;
      }
      .card-image {
        height: 60px;
        width: 86px;
        background-color: #ffe1e1;
        background-position: 0 0;
        background-size: cover;
        /* background-image: url("./assets/images/closeBox.png"); */
      }
      .card-tag {
        height: 10px;
        font-size: 10px;
        padding: 0 10px;
        background-color: #e1ffe4;
      }
      .card-desc {
        height: 30px;
        font-size: 10px;
        padding: 0 10px;
        background-color: #e3c9ba;
      }
    </style>
  </head>
  <body>
    <script>
      let allCardList = [
        new Card({
          name: "攻击者",
          image: "./assets/images/red.png",
          attack: 2,
          type: 1,
          desc: "攻击者",
          tag: "攻击者",
        }),
        new Card({
          name: "攻击者",
          image: "./assets/images/red.png",
          attack: 2,
          type: 1,
          desc: "攻击者",
          tag: "攻击者",
        }),
        new Card({
          name: "攻击者",
          image: "./assets/images/red.png",
          attack: 2,
          type: 1,
          desc: "攻击者",
          tag: "攻击者",
        }),
        new Card({
          name: "攻击者",
          image: "./assets/images/red.png",
          attack: 2,
          type: 1,
          desc: "攻击者",
          tag: "攻击者",
        }),
        new Card({
          name: "防御者",
          image: "./assets/images/red.png",
          attack: 0,
          type: 2,
          desc: "防御者",
          tag: "防御者",
        }),
        new Card({
          name: "防御者",
          image: "./assets/images/red.png",
          attack: 0,
          type: 2,
          desc: "防御者",
          tag: "防御者",
        }),
        new Card({
          name: "防御者",
          image: "./assets/images/blue.png",
          attack: 0,
          type: 2,
          desc: "防御者",
          tag: "防御者",
        }),
        new Card({
          name: "防御者",
          image: "./assets/images/blue.png",
          attack: 0,
          type: 2,
          desc: "防御者",
          tag: "防御者",
        }),
      ];
      let baseCardList = [
        new Card({
          name: "基础攻击者",
          image: "./assets/images/red.png",
          attack: 2,
          type: 1,
          desc: "基础攻击者",
          tag: "基础攻击者",
        }),
        new Card({
          name: "基础防御者",
          image: "./assets/images/blue.png",
          attack: 0,
          type: 2,
          desc: "基础防御者",
          tag: "基础防御者",
        }),
        new Card({
          name: "生命之力",
          image: "./assets/images/green.png",
          attack: 0,
          type: 2,
          desc: "生命之力",
          tag: "生命之力",
        }),
        new Card({
          name: "生命之力",
          image: "./assets/images/green.png",
          attack: 0,
          type: 2,
          desc: "生命之力",
          tag: "生命之力",
        }),
        new Card({
          name: "生命之力",
          image: "./assets/images/green.png",
          attack: 0,
          type: 2,
          desc: "生命之力",
          tag: "生命之力",
        }),
      ];
      let playerCardListOne = [];
      let playerCardListTwo = [];

      do {
        let newCard = randomCard(allCardList);
        playerCardListOne.push(newCard);
        allCardList = allCardList.filter((item) => {
          return item.id != newCard.id;
        });
      } while (playerCardListOne.length < 4);

      do {
        let newCard = randomCard(allCardList);
        playerCardListTwo.push(newCard);
        allCardList = allCardList.filter((item) => {
          return item.id != newCard.id;
        });
      } while (playerCardListTwo.length < 4);

      console.log(playerCardListOne);
      console.log(playerCardListTwo);

      //全局参数
      let isBoxOpen = false;
      let isOpening = false;
      //开宝箱
      function openBox() {
        if (isOpening) return;
        isOpening = true;
        if (isBoxOpen) {
          // document.getElementById("box-img").classList.remove("opening_x");
          // document.getElementById("box-img").style.backgroundImage =
          //   'url("./assets/images/closeBox.png")';
          // isBoxOpen = false;
          // setTimeout(() => {
          //   document.getElementById("box-img").classList.add("shake");
          //   isOpening = false;
          // }, 1000);
          let card1, card2;
          do {
            card1 = randomCard(playerCardListOne);
          } while ([2, 3, 4].includes(card1.type));
          card2 = randomCard(playerCardListTwo);
          handlerAttack(card1, card2);
          // isOpening = false;
        } else {
          document.getElementById("box-img").classList.remove("shake");
          document.getElementById("box-img").classList.add("opening_x");
          setTimeout(() => {
            document.getElementById("box-img").style.backgroundImage =
              'url("./assets/images/openBox.png")';
            //渲染卡牌
            isBoxOpen = true;
            isOpening = false;
            playerCardListOne = shuffleArray(
              playerCardListOne.concat(baseCardList)
            );
            playerCardListTwo = shuffleArray(
              playerCardListTwo.concat(baseCardList)
            );
            showCard(playerCardListOne, "playerOne");
            showCard(playerCardListTwo, "playerTwo");
          }, 2000);
        }
      }
      //展示卡牌
      function showCard(cardList, player) {
        for (let index = 0; index < cardList.length; index++) {
          let newCard = cardList[index];
          let cardId = cardList[index].id;
          // 创建一个新的文档片段
          let fragment = document.getElementById(`${player}`);
          // 创建一个新的元素节点
          let newElement = document.createElement("div");

          if (player == "playerOne") {
            newElement.innerHTML = `<div class="back my-text-01"></div>`;
            newElement.id = `${cardId}Back`;
            newElement.addEventListener("click", () => {
              let oleElement = document.getElementById(`${cardId}Back`);
              oleElement.innerHTML = `<div id="${cardId}-name" class="card-name">${newCard.name}</div>
        <div id="${cardId}-cost" class="card-cost"></div>
        <div id="${cardId}-point" class="card-point">${newCard.attack}</div>
        <div id="${cardId}-image" style="background-image:url(${newCard.image})" class="card-image"></div>
        <div id="${cardId}-tag" class="card-tag">${newCard.tag}</div>
        <div id="${cardId}-desc" class="card-desc">${newCard.tag}</div>`;
              oleElement.className = "card my-text-01";
            });
          } else {
            newElement.innerHTML = `<div class="card my-text-01"><div id="${cardId}-name" class="card-name">${newCard.name}</div>
        <div id="${cardId}-cost" class="card-cost"></div>
        <div id="${cardId}-point" class="card-point">${newCard.attack}</div>
        <div id="${cardId}-image" style="background-image:url(${newCard.image})" class="card-image"></div>
        <div id="${cardId}-tag" class="card-tag">${newCard.tag}</div>
        <div id="${cardId}-desc" class="card-desc">${newCard.tag}</div></div>`;
          }
          // 将新元素添加到文档片段中
          fragment.appendChild(newElement);
          // 将文档片段添加到 DOM 中的某个元素内
          document.body.appendChild(fragment);
        }

        //
        // newElement.id = `${cardId}Back`;

        // 绑定点击事件
        //   newElement.addEventListener("click", () => {
        //     let oleElement = document.getElementById(`${player}`);
        //     oleElement.innerHTML = `<div id="${cardId}-name" class="card-name"></div>
        // <div id="${cardId}-cost" class="card-cost"></div>
        // <div id="${cardId}-point" class="card-point"></div>
        // <div id="${cardId}-image" class="card-image"></div>
        // <div id="${cardId}-tag" class="card-tag"></div>
        // <div id="${cardId}-desc" class="card-desc"></div>`;
        //     oleElement.id = `${cardId}`;
        //     oleElement.className = "card my-text-01";
        //   });
        // 将新元素添加到文档片段中
        // fragment.appendChild(newElement);
        // // 将文档片段添加到 DOM 中的某个元素内
        // document.body.appendChild(fragment);
      }
      function handlerAttack(card1, card2) {
        console.log(card1, card2);
      }
      function shuffleArray(array) {
        for (let i = array.length - 1; i > 0; i--) {
          const j = Math.floor(Math.random() * (i + 1));
          [array[i], array[j]] = [array[j], array[i]]; // 使用解构赋值进行交换
        }
        return array;
      }
    </script>
    <script type="module">
      /**
       * 加载图
       * @param {string} src
       * @returns {Promise<HTMLImageElement>}
       */
      function loadImage(src) {
        return new Promise((resolve) => {
          let image = new Image();
          image.src = src;
          image.onload = (ev) => {
            resolve(image);
          };
        });
      }
    </script>
    <div style="font-size: 20px">1234567艺术字</div>
    <div style="font-size: 20px" class="my-text-01">1234567艺术字</div>
    <div id="box-img" class="box-img shake" onclick="openBox()"></div>
    <div id="playerOne"></div>
    <div id="playerTwo"></div>
    <!-- <div id="attackerBack" class="back my-text-01"></div>
    <div id="defenderBack" class="back my-text-01"></div>
    <div id="attacker" class="card my-text-01">
      <div id="attacker-name" class="card-name">1</div>
      <div id="attacker-cost" class="card-cost">2</div>
      <div id="attacker-point" class="card-point">3</div>
      <div id="attacker-image" class="card-image"></div>
      <div id="attacker-tag" class="card-tag">5</div>
      <div id="attacker-desc" class="card-desc">6</div>
    </div>
    <div id="defender" class="card my-text-01">
      <div id="defender-name" class="card-name">1</div>
      <div id="defender-cost" class="card-cost">2</div>
      <div id="defender-point" class="card-point">3</div>
      <div id="defender-image" class="card-image"></div>
      <div id="defender-tag" class="card-tag">5</div>
      <div id="defender-desc" class="card-desc">6</div>
    </div> -->
  </body>
</html>
